<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>您好，欢迎登录</title>

    <link rel="stylesheet" href="static/layui/css/layui.css" type = "text/css">
    <link rel="stylesheet" href="static/css/index.css" type = "text/css">
    <script type="text/javascript" src="./static/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <style>
        .form{
            height: 300px;
        }
        #tip{
            color: red;
            width: 150px;
            font-size: 15px;
            margin-left: 80px;
        }
    </style>
</head>
<body>

    <div class="login">
        <div class="top">
            <label>login</label>
        </div>
        <div class="form">
            <br>
            <form class="layui-form">
                <br>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名:</label>
                    <div class="layui-input-block">
                        <input id="username" type="text" name="username" lay-verify="required|username"   autocomplete="off" class="layui-input">
                    </div>
                </div>
                <br>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码:</label>
                    <div class="layui-input-block">
                        <input id="password" type="password" name="password" lay-verify="required|password"    autocomplete="off" class="layui-input">
                    </div>

                </div>
                <br>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-radius " lay-submit lay-filter="formDemo">登录</button>
                        &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                        <a type="reset" class="layui-btn layui-btn-radius  layui-btn-primary" onclick="regist()">注册</a>
                    </div>
                </div>

            </form>

        </div>
    </div>
<script>
    layui.use('element', function () {
        var element = layui.element;
        //…
    });

    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form
            , layedit = layui.layedit
            , laydate = layui.laydate;

        form.on('submit(formDemo)', function(){
            var asubmit = {
                "username" : document.getElementById('username').value,
                "password" : document.getElementById('password').value,
            }
            console.log(asubmit);
            $.ajax({
                url: 'http://localhost:8080/login',
                type: 'POST',
                contentType : 'application/json',
                dataType: 'json',
                data: JSON.stringify(asubmit),
                success(res){
                    // alert(Object.keys(obj)[0]);
                    if(res.code == 0) {
                        var url = './pages/menu/main.html'
                        $(window).attr('location', url);
                        console.log(obj);
                    }
                    else {
                        layer.msg("用户名不存在或密码错误！", {icon: '5', time: 3000});
                    }
                },
                error(){
                    layer.msg('500！', {
                        time: 1000, //不自动关闭
                        icon: 'layui-icon-ok',
                    });
                }
            })
            return false;
        })
    });
    
    function regist() {
        layer.open({

            title: ['注册中心'],
            type: 2,
            content: '../pages/menu/regist.html',
            shadeClose: true,
            area: ['1000px', '500px'],
            success: function (layero,index) {

            },
            cancel: function () {

            },
            end(){
                layer.close();
            }
        });


    }


</script>
</body>
</html>